<template>
    <div class="bg-gray-100">
        <div class="container">
            <div class="flex justify-center space-x-4 dragger_wrap">
                <div v-for="(element, index) in elements" :key="index" :id="`element${index + 1}`"
                    class="draggable my_div" :style="{ backgroundColor: element.color }"
                    @mousedown="startDrag(index, $event)" @mouseup="endDrag">
                    {{ element.text }}
                </div>

                <div style="border:1px solid gray;color:#fff"  class=" my_div">111</div>
                <div style="border:1px solid gray;color:#fff"  class=" my_div">222</div>

                <!-- <div class="my_div draggable" @mousedown="startDrag(3, $event)" @mouseup="endDrag" id="element4"
                    style="width:100px;height:200px;border:1px solid #eee;color:#fff">aaa</div> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Card as ACard } from 'ant-design-vue';

const elements = ref([
    { text: '元素 1', color: '#1677ff' },
    { text: '元素 2', color: '#52c41a' },
    { text: '元素 3', color: '#faad14' },
    { text: '元素 4', color: 'red' },
]);

let offsetX = 0;
let offsetY = 0;
let isDragging = false;
let originalIndex = 0;
let dropTargetIndex = null;
let draggingElement = null;

const startDrag = (index, e) => {
    isDragging = true;
    const rect = e.target.getBoundingClientRect();
    offsetX = e.clientX - rect.left;
    offsetY = e.clientY - rect.top;
   
    e.target.style.zIndex = 1000;
    originalIndex = index;
    draggingElement = e.target;
    window.addEventListener('mousemove', onMouseMove);
    document.body.style.overflow = 'hidden';
};

const onMouseMove = (e) => {

    console.log("进入mousrMove?", e)
    if (isDragging) {

        e.target.style.position = 'fixed';

        draggingElement.style.left = (e.clientX - offsetX) + 'px';
        draggingElement.style.top = (e.clientY - offsetY) + 'px';

        const elementsArray = document.querySelectorAll('.draggable');
        elementsArray.forEach((target, index) => {
            if (target !== draggingElement) {
                const rect = target.getBoundingClientRect();
                if (
                    e.clientX >= rect.left &&
                    e.clientX <= rect.right &&
                    e.clientY >= rect.top &&
                    e.clientY <= rect.bottom
                ) {
                    dropTargetIndex = index;
                    return;
                }
            }
        });
    }
};

const endDrag = () => {
    if (isDragging) {
        isDragging = false;
        draggingElement.style.position = '';
        draggingElement.style.left = '';
        draggingElement.style.top = '';
        draggingElement.style.zIndex = '';
        window.removeEventListener('mousemove', onMouseMove);
        document.body.style.overflow = 'auto';

        if (dropTargetIndex !== null) {
            const temp = elements.value[originalIndex];
            elements.value[originalIndex] = elements.value[dropTargetIndex];
            elements.value[dropTargetIndex] = temp;
            dropTargetIndex = null;
        }
    }
};
</script>

<style scoped>
/* 可拖拽元素样式 */
.draggable {
    cursor: move;
    transition: transform 0.2s ease;
    user-select: none;
    padding: 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 拖拽时的样式 */
.draggable.dragging {
    opacity: 0.8;
    transform: scale(1.05);
}

/* 容器样式 */
.container {
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
    width:100%;
}

/* 元素排列样式 */
.flex {
    display: flex;
}

.justify-center {
    justify-content: flex-start;
}

/* .space-x-4>*+* {
    margin-left: 1rem;
} */

.dragger_wrap{
    flex-wrap: wrap;
}

.dragger_wrap>div{
    width:25%;
    margin-top:20px;
    margin-left:30px;
    height:60px;
    
}
</style>